<template>
  <div class="user-dialog bigDialog">
    <el-dialog
        ref="ruleFormRef"
        :model-value="dialogData.props.dialogFormVisible"
        :title="dialogData.props.title"
        :before-close="close"
        :width="dialogData.formLabelWidth"
        :close-on-click-modal="false"
        draggable
    >
      <div>
        <!-- 基础信息 -->
        <div>
          <el-form
            :model="dialogData.formData"
            :inline="true"
            label-width="200px"
            :rules="dialogData.rules"
            ref="addform"
            require-asterisk-position="left"
            size="default"
            scroll-to-error="true"
          >
            <div class="basicstyle">
                <div class="itemStyle ">   
                    <div v-if="dialogData.formData.memo == 'LPG码头介绍'||dialogData.formData.memo == '油品码头介绍' ||dialogData.formData.memo == '散杂货码头介绍'
                        || dialogData.formData.memo == '滨州港介绍' ">
                        <el-form-item label="单位名称：" prop="unitName" required>
                            <el-input
                                placeholder="请输入单位名称"
                                v-model="dialogData.formData.unitName"
                                maxlength="50"
                            />
                        </el-form-item>
                        <el-form-item label="成立日期：" prop="incorporationDate" required>
                            <el-date-picker
                                v-model="dialogData.formData.incorporationDate"
                                type="date"
                                placeholder="请选择成立日期"
                                value-format="YYYY-MM-DD"
                            />
                        </el-form-item>
                        <el-form-item label="公司地址：" prop="unitAddress" required>
                            <el-input
                                placeholder="请输入公司地址"
                                maxlength="50"
                                v-model="dialogData.formData.unitAddress"
                            />
                        </el-form-item>
                        <el-form-item label="单位简介：" prop="unitIntroduction" required>
                            <el-input
                                maxlength="500"
                                show-word-limit
                                placeholder="请输入单位简介"
                                v-model="dialogData.formData.unitIntroduction"
                                type="textarea"
                            />
                        </el-form-item>
                    </div >
                    <div  v-if="dialogData.formData.memo == '企业总人数'">
                        <el-form-item label="企业总人数：" prop="value" required>
                            <el-input-number
                                v-model="dialogData.formData.value"
                                :min="0"
                                :max="100000000"
                                controls-position="right"
                                :precision = '0'
                            />
                        </el-form-item>
                    </div>
                    <div v-if="dialogData.formData.memo == '企业应急人数'">
                        <el-form-item label="企业应急人数：" prop="value" required>
                            <el-input-number
                                v-model="dialogData.formData.value"
                                :min="0"
                                :max="100000000"
                                controls-position="right"
                                :precision = '0'
                            />
                        </el-form-item>
                    </div>
                    <div v-if="dialogData.formData.memo == '年度计划培训次数'">
                        <el-form-item label="年度计划培训次数：" 
                           
                        prop="value" required>
                            <el-input-number
                                v-model="dialogData.formData.value"
                                :min="0"
                                :max="100000000"
                                controls-position="right"
                                :precision = '0'
                            />
                        </el-form-item>
                    </div>
                    <div v-if="dialogData.formData.memo == '滨州港当年度计划产值'">
                        <el-form-item label="滨州港当年度计划产值：" prop="value" required>
                            <el-input-number
                                v-model="dialogData.formData.value"
                                :min="0"
                                :max="100000000"
                                controls-position="right"
                                :precision = '0'
                            />
                        </el-form-item>
                    </div>
                    <div v-if="dialogData.formData.memo == '安全生产天数初始值'">
                        <el-form-item label="安全生产天数初始值：" prop="value" 
                          required>
                            <el-input-number
                                v-model="dialogData.formData.value"
                                :min="0"
                                :max="100000000"
                                controls-position="right"
                                :precision = '0'
                            />
                        </el-form-item>
                    </div>
                </div>           
            </div>
          </el-form>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            class="btn-mixins-clear-default"
            @click="close"
            >取消</el-button>
          <el-button
            class="btn-mixins dia-suc"
            @click="success(addform)"
            >保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script  setup>
import { defineProps, ref,onBeforeMount } from "vue";
import { reactive, watch, defineEmits } from "vue";
import {getRealName, getymdhms} from '@/utils/auth'
import { ElNotification ,ElMessage, ElMessageBox } from "element-plus";
import { getDeptTree as getDeptTree} from '@/api/user.js'
import { inject,getCurrentInstance  } from 'vue'
import {lpgUpdate as lpgUpdate,bigscreenupdate as bigscreenupdate} from '@/api/user.js'

const instance = getCurrentInstance();
const emits = defineEmits(["update:modelValue"]);
const addform = ref('');

const dialogData = reactive({
    formLabelWidth:instance.proxy.formLabelWidth,
    rules:{
      value:[{ required: true, trigger: 'blur', message: '请输入数值' }],
      unitName:[{ required: true,pattern: '[^ \x20]+', trigger: 'blur', message: '请输入单位名称' }],
      unitAddress:[{ required: true,pattern: '[^ \x20]+', trigger: 'blur', message: '请输入公司地址' }],
      unitIntroduction:[{ required: true,pattern: '[^ \x20]+', trigger: 'blur', message: '请输入单位简介' }],
      incorporationDate:[{ required: true, message: "请选择成立日期", trigger: "change" }],
    },
    props:{
        title:'',
        dialogFormVisible:'',
    },
    formData:{
    },
    showInput1 : false,
    showInput2 : false
})
let props = defineProps({
  dialogFormVisible: {
    type: Boolean,
  },
  dialogTitle: {
    type: String,
  },
  dialogTableValue: {
    type: Object,
    default: () => {},
  },

});
const getDeptTreeFun=()=>{
    let id = JSON.parse(localStorage.getItem('userData')).userId;
    getDeptTree(id).then((res)=>{
        if(res.code == 200){
            dialogData.treedata= res.body;
        }else{
            ElNotification({
              title: '警告',
              message: res.message?res.message:'服务器异常',
              type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008){
                    store.dispatch('app/logout')
                }
        }
    })
}
onBeforeMount(()=>{
  getDeptTreeFun()

})
watch(
  () => props,
  () => {
    dialogData.props.title = props.dialogTitle;
    dialogData.props.dialogFormVisible = props.dialogFormVisible;
    if (dialogData.props.title === "编辑" ){
        dialogData.formData = props.dialogTableValue;
        console.log(dialogData.formData)
    }else {
        dialogData.formData= {}
        dialogData.formData.mustNumber = 0
    }
    
  },
  { deep: true, immediate: true }
);


const close = () => {
  addform.value.resetFields();
  emits("update:modelValue", false);
};

const success = (addform) => {

  if (!addform) return;
  addform.validate(async (valid) => {
      console.log(valid)
    if (valid) {
        let obj = JSON.parse(JSON.stringify(dialogData.formData));
        let user = JSON.parse(localStorage.getItem('userData'))
         obj.createUser = user.userId;
         obj.createUserName = user.realName;
         if(obj.memo == '企业总人数'||obj.memo ==  '企业应急人数'||obj.memo ==  '年度计划培训次数'||
         obj.memo ==  '滨州港当年度计划产值'||obj.memo ==  '安全生产天数初始值'){
             bigscreenupdate(obj).then((res)=>{
                if(res.code ===200){
                    close()
                }else{
                    ElNotification({
                    title: '警告',
                    message: res.message?res.message:'服务器异常',
                    type: 'warning',
                    })
                    if(res.message.indexOf('token已过期')>-1  ){
                    store.dispatch('app/logout')
                    }
                }
                })
         }else if (obj.memo == 'LPG码头介绍'||obj.memo == '滨州港介绍'||obj.memo == '油品码头介绍'||obj.memo == '散杂货码头介绍') {
                 lpgUpdate(obj).then((res)=>{
                    if(res.code ===200){
                        close()
                    }else{
                        ElNotification({
                        title: '警告',
                        message: res.message?res.message:'服务器异常',
                        type: 'warning',
                        })
                        if(res.message.indexOf('token已过期')>-1  ){
                        store.dispatch('app/logout')
                        }
                    }
                })
         }
        
    } else {
      return false;
    }
  });
};

</script>



<style lang = 'less' scoped>
.user-dialog {

  .basictitle {
    font-size: 18px;
    margin: 16px 0 24px;
    color: #333333;
  }
}
:deep(.el-form-item__label ){
  font-size: 14px;
}

.itemStyle{
    .titleName{
        color: #4B515B;
        font-size: 14px;
        padding-left: 8px;
        margin-left: 8px;
        border-left: 5px solid #2E83FC;
        margin-bottom: 16px;
        
    }
}
.bigDialog{
    :deep(.el-input){
      width: 100%;
    }
    :deep(.el-select){
      width:100%;
    }
    :deep(.el-form-item__content) {
    width: 100%;
  }
    :deep(.el-dialog__footer) {
      padding-top: 16px;
      background-color: #ffffff;
    }
    :deep(.el-dialog__body) {
      padding: 0;
      max-height: 550px;
      overflow-y: auto;
      overflow-x: hidden;
      background-color: #ffffff;
      padding: 32px 88px 16px 32px;
    }
    :deep(.el-dialog__header) {
      border-bottom: 1px solid #cccccc;
      padding: 16px;
      margin-right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    :deep(.el-dialog__title) {
      color: #1C222C;
      font-size: 20px;
      width: 100px;
    }
    :deep(.el-dialog__headerbtn ){
      position: static;
      top: 0px;
      right: 0;
      padding: 0;
      width: auto;
      height: auto;
    }
  
  :deep(.el-form-item__label ){
    font-size: 14px;
  }
  :deep(.el-form) {
    position: relative;
  }
  
  :deep(.el-form-item__content) {
    width: 100%;
  }
  :deep(.el-form--inline .el-form-item){
      width:100%
  }
  :deep(.el-input-number){
      width: 100%;
  }
  :deep(.el-input-number .el-input__inner){
    text-align: left;
}
  }
</style>
